<template>
  <div class="admin-home">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div class="card-header">
            <span>系统用户总数</span>
          </div>
          <div class="card-content">
            <div class="number">{{ userStats.total }}</div>
            <div class="label">人</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="card-header">
            <span>在线用户</span>
          </div>
          <div class="card-content">
            <div class="number">{{ userStats.online }}</div>
            <div class="label">人</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="card-header">
            <span>质量数据条数</span>
          </div>
          <div class="card-content">
            <div class="number">{{ dataStats.qualityData }}</div>
            <div class="label">条</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <div class="card-header">
            <span>系统运行天数</span>
          </div>
          <div class="card-content">
            <div class="number">{{ systemStats.runningDays }}</div>
            <div class="label">天</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card class="box-card">
          <div class="card-header">
            <span>用户角色分布</span>
          </div>
          <div class="chart-container">
            <div ref="roleChart" style="width: 100%; height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div class="card-header">
            <span>系统操作日志</span>
          </div>
          <div class="log-container">
            <el-timeline>
              <el-timeline-item
                v-for="log in systemLogs"
                :key="log.id"
                :timestamp="log.timestamp"
                :type="log.type"
              >
                {{ log.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

const userStats = ref({
  total: 25,
  online: 9
})

const dataStats = ref({
  qualityData: 348
})

const systemStats = ref({
  runningDays: 12
})

// 图表相关
const roleChart = ref()
let roleChartInstance: echarts.ECharts | null = null

// 用户角色分布数据
const roleData = ref([
  { name: '管理员', value: 3 },
  { name: '质量经理', value: 4 },
  { name: '检验员', value: 6 },
  { name: '工艺工程师', value: 5 },
  { name: '供应链主管', value: 7 }
])

const systemLogs = ref([
  {
    id: 1,
    timestamp: '2024-01-15 14:30:25',
    type: 'success',
    content: '用户 张三 登录系统'
  },
  {
    id: 2,
    timestamp: '2024-01-15 14:25:10',
    type: 'warning',
    content: '质量数据批量导入完成，共导入 150 条记录'
  },
  {
    id: 3,
    timestamp: '2024-01-15 14:20:05',
    type: 'info',
    content: '系统定时备份任务执行成功'
  },
  {
    id: 4,
    timestamp: '2024-01-15 14:15:30',
    type: 'danger',
    content: '检测到异常登录尝试，已自动阻止'
  }
])

// 初始化用户角色分布饼图
const initRoleChart = () => {
  if (!roleChart.value) return
  
  roleChartInstance = echarts.init(roleChart.value)
  
  const option = {
    title: {
      text: '用户角色分布',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'middle'
    },
    series: [{
      name: '用户角色',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['60%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: roleData.value
    }]
  }
  
  roleChartInstance.setOption(option)
  
  // 响应式调整
  window.addEventListener('resize', () => {
    roleChartInstance?.resize()
  })
}

onMounted(() => {
  console.log('管理员首页加载完成')
  nextTick(() => {
    initRoleChart()
  })
})
</script>

<style scoped>
.admin-home {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.card-content {
  text-align: center;
}

.number {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
  line-height: 1;
}

.label {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.chart-container {
  padding: 20px 0;
}

.log-container {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
}
</style>